<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <el-form :model="params">
          <el-form-item prop="keyword">
            <div class="head">
              <div>
                <strong>关键字</strong>
                <el-input
                  placeholder="根据编号搜索"
                  v-model="params.keyword"
                  clearable
                  class="text"
                  ref="fromData"
                >
                </el-input>
              </div>
              <div>
                <el-button @click="removefn">清除</el-button>
                <el-button type="primary" @click="search">搜索</el-button>
              </div>
            </div>
          </el-form-item>
        </el-form>

        <!-- 提示栏 -->
        <div>
          <el-alert
            v-if="alertText"
            :title="alertText"
            type="info"
            class="alert hd"
            :closable="false"
            show-icon
          ></el-alert>
        </div>
        <!-- 表单 -->
        <el-table :data="tableData">
          <el-table-column fixed prop="id" label="编号"> </el-table-column>
          <el-table-column label="题型">
            <template slot-scope="scope">
              <span v-if="scope.row.questionType == 1">单选</span>
              <span v-else-if="scope.row.questionType == 2">多选</span>
              <span v-else-if="scope.row.questionType == 3">简答</span>
            </template>
          </el-table-column>
          <el-table-column label="题目编号">
            <!-- from(scope.row.questionIDs) -->
            <template slot-scope="scope">
              <!-- :href="item.number" -->
              <a
                style="color: rgb(0, 153, 255)"
                v-for="(item, index) in scope.row.questionIDs"
                :key="index"
                @click="pop(item.id)"
                >{{ item.number }}</a
              >
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间"> </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)">
          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)">
          </el-table-column>
          <el-table-column prop="userName" label="录入人"> </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="hDel(scope.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block pages">
          <!-- 分页 -->
          <el-pagination
            class="fen"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="params.pagesize"
            layout=" sizes, prev, pager, next, jumper"
            :total="total"
          >
            <!-- :current-page="currentPage4" -->
          </el-pagination>
        </div>
      </el-card>
      <el-dialog
        title="题目预览"
        :visible.sync="showpreview"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <Prestions @close="showpreview = false" :questionId="popID" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions'
import { questionType } from '@/api/hmmm/constants'
// import Preview from '../components/questions-preview'
import Prestions from '@/module-hmmm/components/questions-previewer'
export default {
  components: {
    Prestions
  },
  data () {
    return {
      tableData: [], // 表单数据
      // questionlist: [], // 题目编号
      params: {
        page: 1, // 当前页
        pagesize: 20, // 每页条数
        keyword: this.title
      },
      total: 0, // 总个数
      showpreview: false,
      popID: 0
    }
  },
  created () {
    this.loadpast()
  },
  computed: {
    questionType () {
      return questionType
    },
    alertText () {
      return `共${this.total}条记录`
    }
  },
  methods: {
    async loadpast (value) {
      // 获取页面信息
      const res = await randoms(this.params)
      console.log(res)
      this.tableData = res.data.items
      console.log('tableData', this.tableData)
      this.total = res.data.counts
      // this.questionlist = res.data.items[0].questionIDs
      // console.log('哈哈', this.questionlist)
    },
    async doDel (id) {
      // 删除页面
      try {
        const res = await removeRandoms({ id })
        console.log('删除', res)
        if (this.tableData.length === 1) {
          this.params.page--
          if (this.params.page <= 0) {
            this.params.page = 1
          }
        }
        this.loadpast() // 刷新页面
      } catch (err) {
        console.log(err)
      }
    },
    // 删除
    hDel (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.doDel(id)
          // this.loadpast()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 更改每行显示的页数
    handleSizeChange (val) {
      this.params.pagesize = val
      if (this.params.pagesize === 1) {
        this.loadpast() // 重新刷新页面
      }
    },
    // 点击某个页码
    handleCurrentChange (cur) {
      this.params.page = cur
      this.loadpast()
    },
    // 清除搜索框内容
    removefn () {
      this.params.keyword = ''
      if (this.params.keyword === '') {
        this.loadpast()
      }
      // console.log('真的吗', this.$refs.fromData.nativeInputValue)
      // // console.log(this.params.keyword)
      // if (this.$refs.fromData.nativeInputValue.length > 0) {
      //   this.$refs.fromData.nativeInputValue = ''
      // }
    },
    // 搜索按钮
    search () {
      this.params.page = 1
      this.loadpast(this.params)
    },
    // 点击题目编号弹出弹框
    pop (id) {
      console.log('我的id', id)
      this.showpreview = true
      this.popID = id
    }
  }
}
</script>

<style scoped >
.head {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.text {
  width: 250px;
  margin-left: 20px;
}
.hd {
  margin-top: 20px;
  margin-bottom: 20px;
}
.fen {
  float: right;
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>
